import React, { Component } from "react";
import {
  Layout,
  Menu,
  Breadcrumb,
  Button,
  Avatar,
  Badge,
  Popover,
  BackTop,
  Dropdown,
  Space,
  Modal,
  Tooltip,
} from "antd";

import {
  FireOutlined,
  TeamOutlined,
  UserOutlined,
  FilePdfOutlined,
  AlignLeftOutlined,
  SnippetsOutlined,
  PlusCircleOutlined,
  EditOutlined,
  FundProjectionScreenOutlined,
  LogoutOutlined,
  SettingOutlined,
  QuestionCircleOutlined,
  ApartmentOutlined,
  DeploymentUnitOutlined,
  BranchesOutlined,
  ExclamationCircleOutlined,
  YuqueFilled,
  HomeFilled,
} from "@ant-design/icons";
import { Route, Link } from "react-router-dom";
import "./admin.css";
import Authenticate from "../../components/reqAuth";
import loadable from "../../util/loadable";

import HomePage from "../home/index";

const AddArticle = loadable(() => import("../blog/addblog"));
const MyBlog = loadable(() => import("../myblog/index"));
const BlogList = loadable(() => import("../blog/bloglist"));
const BlogType = loadable(() => import("../blog/blogtype"));
const AddNews = loadable(() => import("../news/addnews"));
const StudentCode = loadable(() => import("../student/stuCode"));
const Student = loadable(() => import("../student/index"));
const Teacher = loadable(() => import("../teacher/index"));
const PaperType = loadable(() => import("../paper/papertype"));
const PaperList = loadable(() => import("../paper/index"));
const NewsList = loadable(() => import("../news/newslist"));
const EditNews = loadable(() => import("../news/edit"));
const Jurisdiction = loadable(() => import("../power/index"));
const PersonalCenter = loadable(() => import("../personalCenter/index"));
const MyPaper = loadable(() => import("../myPaper/index"));

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;
const { confirm } = Modal;
const url = require("../../util/conUrl");

export default class SiderDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      collapsed: false,
      user_name: "",
      user_avatar: "",
      isadmin: false,
    };
  }
  componentDidMount() {
    let b_user = JSON.parse(localStorage.getItem("b_user"));
    let c_user = JSON.parse(localStorage.getItem("c_user"));
    if (b_user && c_user) {
      if (c_user.isadmin === 1) {
        //超级管理员
        this.setState({
          isadmin: true,
        });
      }
      this.setState({
        user_name: b_user.user_name,
        user_avatar: c_user.user_img,
      });
    }
  }
  logout = () => {
    let self = this;
    confirm({
      title: "你确定要退出吗?",
      icon: <ExclamationCircleOutlined />,
      okText: "确认",
      cancelText: "取消",
      onOk() {
        localStorage.clear();
        sessionStorage.clear();
        self.props.history.push("/login");
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  };
  // onCollapse = (collapsed) => {
  //   console.log(collapsed);
  //   this.setState({ collapsed });
  // };
  writeBlog = () => {
    console.log(this.props);
    this.props.history.push("/m/blog/addblog");
  };
  render() {
    const userContent = (
      <div>
        <Menu selectedKeys={["xxx"]}>
          <Menu.Item key="0" icon={<SettingOutlined />}>
            <Link to="/m/personalcenter/a">个人设置</Link>
          </Menu.Item>
          <Menu.Divider />
          <Menu.Item key="1" icon={<LogoutOutlined />} onClick={this.logout}>
            退出登录
          </Menu.Item>
        </Menu>
      </div>
    );
    const adminMenu = (
      <Menu theme="dark" defaultSelectedKeys={[""]} mode="inline">
        <SubMenu key="sub1" icon={<FireOutlined />} title="动态管理">
          <Menu.Item key="2" icon={<AlignLeftOutlined />}>
            <Link to="/m/news/newslist">动态列表</Link>
          </Menu.Item>
          <Menu.Item key="1" icon={<PlusCircleOutlined />}>
            <Link to="/m/news/addnews">新建动态</Link>
          </Menu.Item>
        </SubMenu>

        <SubMenu key="sub2" icon={<SnippetsOutlined />} title="博客管理">
          <Menu.Item key="3" icon={<AlignLeftOutlined />}>
            <Link to="/m/blog/bloglist">博客列表</Link>
          </Menu.Item>
          <Menu.Item key="4" icon={<ApartmentOutlined />}>
            <Link to="/m/blog/blogtype">博客种类</Link>
          </Menu.Item>
        </SubMenu>

        <SubMenu key="sub3" icon={<UserOutlined />} title="成员管理">
          <Menu.Item key="5" icon={<UserOutlined />}>
            <Link to="/m/member/t/h">老师</Link>
          </Menu.Item>
          <Menu.Item key="6" icon={<TeamOutlined />}>
            <Link to="/m/member/s">学生</Link>
          </Menu.Item>
          <Menu.Item key="7" icon={<DeploymentUnitOutlined />}>
            <Link to="/m/member/scode">学生状态</Link>
          </Menu.Item>
        </SubMenu>

        <SubMenu key="sub4" icon={<FilePdfOutlined />} title="论文管理">
          <Menu.Item key="8" icon={<AlignLeftOutlined />}>
            <Link to="/m/paper/list">
              <Badge dot>论文列表</Badge>
            </Link>
          </Menu.Item>
          <Menu.Item key="10" icon={<ApartmentOutlined />}>
            <Link to="/m/paper/papertype">会议/期刊</Link>
          </Menu.Item>
        </SubMenu>

        <Menu.Item key="11" icon={<BranchesOutlined />}>
          <Link to="/m/jurisdiction">权限管理</Link>
        </Menu.Item>
        <Menu.Item key="14" icon={<FundProjectionScreenOutlined />}>
          <Link to="/m/myblog"> 我的博客</Link>
        </Menu.Item>
        <Menu.Item key="13" icon={<FilePdfOutlined />}>
          <Link to="/m/mypaper">我的论文</Link>
        </Menu.Item>
      </Menu>
    );
    const stuMenu = (
      <Menu theme="dark" defaultSelectedKeys={[""]} mode="inline">
        <Menu.Item key="14" icon={<FundProjectionScreenOutlined />}>
          <Link to="/m/myblog"> 我的博客</Link>
        </Menu.Item>
        {/* <Menu.Item key="13" icon={<FilePdfOutlined />}>
          <Link to="/m/mypaper">我的论文</Link>
        </Menu.Item> */}
      </Menu>
    );
    return (
      <Layout style={{ minHeight: "100vh" }}>
        <BackTop />
        <Sider
        // collapsible
        // collapsed={this.state.collapsed}
        // onCollapse={this.onCollapse}
        >
          <Link to="/m/index">
            <div className="logo">
              <svg
                t="1591234103373"
                style={{ marginRight: ".5rem" }}
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3497"
                width="26"
                height="26"
              >
                <path
                  d="M390.4 352L320 550.4h147.2L396.8 352z"
                  fill="#e6e6e6"
                  p-id="3498"
                ></path>
                <path
                  d="M896 0H128C57.6 0 0 57.6 0 128v768c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128V128c0-70.4-57.6-128-128-128zM537.6 748.8l-32-83.2c-6.4-19.2-12.8-25.6-32-25.6H313.6c-12.8 0-25.6 6.4-32 19.2l-32 83.2c-6.4 19.2-12.8 25.6-32 25.6h-44.8c-25.6 0-38.4-25.6-32-44.8l166.4-448c6.4-12.8 19.2-19.2 38.4-19.2H448c12.8 0 25.6 6.4 32 19.2l166.4 448c12.8 19.2-6.4 44.8-25.6 44.8h-51.2c-19.2 0-25.6-6.4-32-19.2z m262.4 19.2h-51.2c-19.2 0-32-12.8-32-32v-448c0-19.2 12.8-32 32-32h51.2c19.2 0 32 12.8 32 32v448c0 19.2-12.8 32-32 32z"
                  fill="#e6e6e6"
                  p-id="3499"
                ></path>
              </svg>
            </div>
          </Link>
          {this.state.isadmin ? adminMenu : stuMenu}
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background">
            <Button
              icon={<EditOutlined />}
              onClick={this.writeBlog}
              type="primary"
            >
              写博客
            </Button>
            <Space size="large">
              {/* <Tooltip placement="topLeft" title="机器学习网站">
                <a href="http://www.imu-ai.com" target="_blank">
                  <HomeFilled style={{ fontSize: 20, color: "#74b9ff" }} />
                </a>
              </Tooltip> */}
              <Tooltip placement="topLeft" title="组内羽雀">
                <a href="https://imucs.yuque.com/dashboard" target="_blank">
                  <YuqueFilled style={{ fontSize: 20, color: "#00b894" }} />
                </a>
              </Tooltip>
              <Tooltip placement="topLeft" title="MarkDown书写示例">
                <a
                  href="https://www.runoob.com/markdown/md-tutorial.html"
                  target="_blank"
                >
                  <QuestionCircleOutlined
                    style={{ fontSize: 20, color: "#888" }}
                  />
                </a>
              </Tooltip>

              <Dropdown overlay={userContent}>
                <div>
                  <Avatar
                    style={{
                      marginRight: ".5rem",
                      border: ".5px solid #ccc",
                    }}
                    src={url.api + "/file/avatar/" + this.state.user_avatar}
                  />
                  {this.state.user_name}
                </div>
              </Dropdown>
            </Space>
          </Header>
          <Content style={{ margin: "0 16px" }}>
            <div>
              <Route path="/m/index" component={Authenticate(HomePage)} />
              <Route path="/m/news/addnews" component={Authenticate(AddNews)} />
              <Route
                path="/m/news/editnews"
                component={Authenticate(EditNews)}
              />
              <Route
                path="/m/news/newslist"
                component={Authenticate(NewsList)}
              />
              <Route
                path="/m/blog/addblog"
                component={Authenticate(AddArticle)}
              />
              <Route
                path="/m/blog/bloglist"
                component={Authenticate(BlogList)}
              />
              <Route
                path="/m/blog/blogtype"
                component={Authenticate(BlogType)}
              />
              <Route path="/m/paper/list" component={Authenticate(PaperList)} />
              <Route path="/m/member/t" component={Authenticate(Teacher)} />
              <Route path="/m/member/s" component={Authenticate(Student)} />

              <Route
                path="/m/paper/papertype"
                component={Authenticate(PaperType)}
              />
              <Route
                path="/m/member/scode"
                component={Authenticate(StudentCode)}
              />
              <Route
                path="/m/personalcenter/"
                component={Authenticate(PersonalCenter)}
              />
              <Route
                path="/m/jurisdiction"
                component={Authenticate(Jurisdiction)}
              />
              {/* 普通用户管理 */}
              {/* <Route path="/m/myteam" component={Authenticate(MyTeam)} /> */}

              <Route path="/m/mypaper" component={Authenticate(MyPaper)} />
              <Route path="/m/myblog" component={Authenticate(MyBlog)} />
            </div>
          </Content>
          <Footer style={{ textAlign: "center" }}>
            内蒙古大学机器学习小组 ©2021-2022 Created by 机器学习小组
          </Footer>
        </Layout>
      </Layout>
    );
  }
}
